<template>
	<view class="pages">
		<view class="search_warp">
			<view class="search u-flex-y-center u-flex-between">
				<view class="u-flex-y-center">
					<view class="search_img">
						<image :src="`${$http_cos}/static/search.png`"></image>
					</view>
					<input type="number" v-model="id" placeholder="输入编号" @blur="onSearch"
						@keyup.enter.native="$event.target.blur()" />
				</view>
				<view class="search_btn" @keyup.enter.native="onSearch">
					<text>搜索</text>
				</view>
			</view>
			<view class="collapse u-flex-between u-flex-y-center">
				<template v-for="item in collapselist">
					<yy-choosecade v-model="formData[item.fieldName]" @change_list="submit" :config="item">
					</yy-choosecade>
				</template>
			</view>
		</view>
		<view class="list">
			<!-- <view class="item u-flex-between u-flex-y-center" v-for="(item,index) in proData" :key="index"
				@click="skip(item)">

				<view class="u-flex-column item_botton_text">
					<text>编号{{item.userId}}@{{item.matchmakerUid}}({{item.memeberName}})</text>
				</view>
				<view class="u-flex-column  item_botton_text">
					<text>剩余推荐次数：{{item.recommendNum}}</text>
				</view>
			</view> -->
			<view class="item " v-for="(item,index) in proData" :key="index" @click="skip(item)">
				<view class="u-flex-between u-flex item_top" >
					<text>编号{{item.userId}}@{{item.matchmakerUid}}({{item.memeberName}})</text>
					<text>剩余推荐次数：{{item.recommendNum}}</text>
				</view>
				<view class="u-flex-xy-center item_botton" v-if="item.list.length>0">
					<text>{{intercept(item.list)}}</text>
				</view>
			</view>
		</view>
		<u-empty v-if="proData.length==0" textSize='30' mode="data" width="200" height="200"
			icon="https://hl-1316403513.cos.ap-shanghai.myqcloud.com/static/%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA.png">
		</u-empty>
	</view>
</template>

<script>
	import {
		getMemberList,
		getMatchList,
		getRecommendUserList
	} from '@/common/api.js'
	const app = getApp()
	export default {
		data() {
			return {
				current: 0,
				id: '',
				tab_list: [{
					name: '待回访',
					status: 3
				}, {
					name: '回访结束',
					status: 4
				}],
				$http_cos: app.$http_cos,
				collapselist: [{
					title: '全部',
					label: '红娘id',
					value: '',
					array: [],
					fieldName: 'matchmakerUid',
					defaultIndex: [0]
				}, {
					title: '全部会员',
					label: '会员等级',
					array: [],
					value: '',
					defaultIndex: [0],
					fieldName: 'memberId',
				}],
				proData: [],
				// page: 1,
				count: 0,
				// perPage: 10,
				num_id: 0,
				formData: {
					memberId: 0,
					page: 1,
					matchmakerUid: 0,
					perPage: 20,
					id: ''
				}
			}
		},
		watch: {
			id(val) {
				this.formData.id = val
			}
		},

		async onLoad() {
			let list1 = this.collapselist[1]
			let list = this.collapselist[0]
			let arr = {
				'id': '全部',
				'name': '全部',
				days: ''
			}
			let get_MemberList = await this.get_MemberList()
			get_MemberList.unshift(arr)
			list1.array = get_MemberList
			list1.title = '全部'

			this.formData.memberId = get_MemberList[0].id == '全部' ? 0 : get_MemberList[0].id
			let get_MatchList = await this.get_MatchList()
			list.title = '全部'
			get_MatchList.unshift(arr)
			this.formData.matchmakerUid = get_MatchList[0].id == '全部' ? 0 : get_MatchList[0].id

			list.array = get_MatchList.map(item => {
				return {
					name: item.id,
					id: item.id
				}
			})
			this.$nextTick(() => {
				this.get_RecommendUserList()
			})
		},
		onReachBottom() {
			this.get_RecommendUserList()
		},
		methods: {
			intercept(it){
				return it.join("、")
			},
			submit(val) {
				let {
					name,
					obj
				} = val
				this.collapselist = this.collapselist.map(item => {
					if (item.fieldName == obj.fieldName) {
						if (item.fieldName == 'matchmakerUid') {
							item.title = '@' + name
							
						} else {
							item.title = name
						}
			
					}
					return item
				})
				this.init()
			},
			get_MemberList() {
				return new Promise(resolve => {
					getMemberList().then((result) => {
						resolve(result)
					}).catch((err) => {
						reject(err)
					})

				})
			},
			get_MatchList() {
				return new Promise(resolve => {
					getMatchList().then((result) => {
						resolve(result)
					}).catch((err) => {
						reject(err)
					})

				})
			},
			skip(item) {
				uni.navigateTo({
					url: '/pagesA/square_details/index?id='+item.userId
				})
			},
			onSearch() {
				this.init()
			},
			click(e) {
				if (e.index == this.current) return;
				this.current = e.index
				this.init()
			},
			init() {
				this.formData.page = 1
				this.proData = []
				this.count = 0
				setTimeout(() => {
					this.get_RecommendUserList()
				}, 200)
			},
			get_RecommendUserList() {
				let data = {
					params:this.formData
				}
				getRecommendUserList(data, {
					custom: {
						auth: false,
						toast: false,
						catch: false
					}
				}).then((result) => {
					this.proData = [...this.proData, ...result.list]
					this.count = result.count
					// result.list.length <= 0 ? this.status = 'noMore' : this.status = 'more'
					this.formData.page++;
				}).catch((err) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {

		.search_warp {
			padding: 12rpx 24rpx;
			box-sizing: border-box;
			background-color: #fff;
			height: 176rpx;

			/deep/ .u-tabs__wrapper__nav__item {
				flex: 1;
				padding: 0;

				&__text {
					font-size: 28rpx;
				}
			}

			.search {
				position: relative;
				height: 72rpx;
				width: 100%;
				background: #F9F9F9;
				border-radius: 36rpx;
				padding: 0 30rpx 0 32rpx;
				box-sizing: border-box;

				.search_img {
					width: 36rpx;
					height: 36rpx;
					margin-right: 8rpx;
				}

				input {
					font-size: 28rpx;
					color: #C9C9C9;
				}

				.search_btn {
					padding: 0 24rpx;
					box-sizing: border-box;
					position: relative;

					&::after {
						content: '';
						position: absolute;
						left: 0;
						top: 0;
						width: 2rpx;
						height: 100%;
						background: #E5E5E5;
						-webkit-transform: scaleX(.5);
						transform: scaleX(.5);
					}

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #111111;
					}
				}
			}
		}

		.collapse {
			margin-top: 10rpx;
			padding:0 62rpx;
			box-sizing: border-box;
			.collapse_item {
				padding: 12rpx;
				box-sizing: border-box;

				text {
					font-size: 28rpx;
					color: #000000;
				}

				.arrow-icon {
					width: 20rpx;
					height: 12rpx;
					margin-left: 27rpx;
				}
			}
		}

		.list {
			padding: 20rpx;
			box-sizing: border-box;

			.item {

				background-color: #fff;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 16rpx;
				// height: 71rpx;
				// padding: 0 32rpx 0 43rpx;
				box-sizing: border-box;

				&:last-child {
					margin-bottom: 0;
				}
				.item_top{
					height: 71rpx;
					align-items: center;
					padding:0 31rpx;
					box-sizing:border-box;
					
				}
				.item_botton{
					padding:19rpx 31rpx;
					box-sizing:border-box;
					border-top:2rpx solid  #EEEEEE;
					text{
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						color: #929292;
					}
				}
				.item_botton_text {
					text {
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #000000;

					}

					align-items: center;
				}

				.arrows {
					width: 74rpx;
					height: 44rpx;
					padding: 0 90rpx 0 79rpx;
				}
			}
		}


	}
</style>
